<template>
	<view>
		<view class="text-area" style="font-size: 20px">
			{{group_name}}
		</view>

		<view v-if="operate == 1" class="padding">
			<navigator class="cu-btn block bg-blue margin-tb-sm lg"
				:url="'../member/member_manage?group_id='+group_id"
				disabled type="">
				成员管理
			</navigator>
		</view>

		<!-- 已建报备列表：查看统计、开启/关闭、删除 -->
		<view v-if="!myReportList.length" class="margin-lr margin-top text-center">当前还没有报备</view>
		<view v-else class="margin-lr">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-circlefill text-green"></text> 报备列表：
				</view>
			</view>
			<view class="cu-list menu">
				<view class="cu-item flex justify-between"
					v-for="(myReportListVal, myReportListIdx) in myReportList"
					:key="myReportListIdx">
					<view class="content">
						<view class="action">
							<text class="cuIcon-title text-green"></text>
							<navigator :url="'../report/report_detail?report_id='+myReportListVal._id">{{myReportListVal.name}}</navigator>
						</view>
					</view>
					<view class="flex content padding justify-end">
						<button v-if="operate == 1" class="cu-btn margin-right" @click="deleteRpt(myReportListVal._id,myReportListIdx)">删除</button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="operate == 1" class="padding">
			<navigator class="cu-btn block bg-blue margin-tb-sm lg"
				url="../report/create_report"
				disabled type="">
				创建报备
			</navigator>
		</view>

		<view v-if="operate == 1" class="padding">
			<navigator class="cu-btn block bg-blue margin-tb-sm lg"
				:url="'../access/access_manage?group_id='+group_id"
				disabled type="">
				出入管理
			</navigator>
		</view>

		<!-- 我的下属团体 -->
		<view v-if="!myChildGroup.length" class="margin-lr margin-top text-center">当前还没有下属团体</view>
		<view v-else class="margin-lr">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-circlefill text-green"></text> 下属团体列表：
				</view>
			</view>
			<view class="cu-list menu">
				<view class="cu-item flex justify-between"
					v-for="(myChildGroupVal, myChildGroupIdx) in myChildGroup"
					:key="myChildGroupIdx">
					<view class="content">
						<view class="action">
							<text class="cuIcon-title text-green"></text>
							<navigator v-if="operate > 0 && operate < 3 && !myChildGroupVal.is_split" :url="'../group/group_detail?group_id='+myChildGroupVal._id">{{myChildGroupVal.name}}</navigator>
							<view v-else>{{myChildGroupVal.name}}</view>
						</view>
					</view>
					<view class="flex content padding justify-end">
						<button v-if="operate == 1" class="cu-btn margin-right" @click="removeGroup(myChildGroupVal._id)">断开关联</button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="operate == 1" class="padding">
			<navigator class="cu-btn block bg-blue margin-tb-sm lg"
				:url="'../group/join_group?group_id='+group_id"
				disabled type="">
				邀请团体加入
			</navigator>
			<!-- <view class="text-area">点击上面的按钮，进入页面并分享给下属团体！</view> -->
			<button class="join_group" :data-clipboard-text="cururl+'/#/pages/group/join_group?group_id='+group_id" @click="copyJoinGroup">点击复制给下属团体</button>
		</view>

	</view>
</template>

<script>
	import Clipboard from 'clipboard';
	import Utils from '@/common/js/utils.js';

	export default {
		data() {
			return {
				cururl: "",
				account_id: '',
				group_id: '',
				group_name: "",

				operate: 0, // 参见checkGroupDepth函数
				myReportList: [],
				myChildGroup: []
			}
		},
		created() {
			this.cururl = location.origin;
			this.account_id = uni.getStorageSync("account_id");
			if (!this.account_id) {
				uni.showToast({
					icon: 'none',
					title: '请先登录，再点击进入本页面！',
					duration: 1000
				});
				uni.navigateTo({
					url: "/pages/user/user_login"
				});
			}

			this.group_id = this.$route.query.group_id;
			uni.setStorageSync("group_id", this.group_id);

			if (this.group_id) {
				this.checkUserGroup();
				this.getGroupDetail();
			}
		},
		methods: {
			copyJoinGroup() {
				var clipboard = new Clipboard('.join_group')
				clipboard.on('success', e => {
					uni.showToast({
					icon: 'none',
					title: '复制成功'
					});
					// 释放内存
					clipboard.destroy()
				})
				clipboard.on('error', e => {
					// 不支持复制
					uni.showToast({
					icon: 'none',
					title: '该浏览器不支持自动复制'
					});
					// 释放内存
					clipboard.destroy()
				})
			},
			checkUserGroup() {
				uniCloud.callFunction({
					name: "ha_check_user_group",
					data: {
						account_id: this.account_id,
						group_id: this.group_id
					},
					success: ({result}) => {
						// console.log(result)

						if (result > 0) {
							this.operate = result;
						} else {
							uni.showModal({
								content: "请确认页面来源",
								showCancel: false,
								success: (res) => {
									uni.navigateTo({
										url: "/pages/user/user_login"
									});
								}
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			getGroupDetail() {
				let group_id = this.group_id;

				uniCloud.callFunction({
					name: "ha_get_group",
					data: {
						type: 1,
						group_id
					},
					success: ({result}) => {
						// console.log(result)

						if ( result.status === 0 ) {
							// console.log(result.self)
							const {
								name
							} = result.self;
							this.group_name = name;

							this.myReportList = result.reportList;
							this.myChildGroup = result.childGroup;
						} else {
							uni.showToast({
								icon: 'none',
								title: `${result.msg || "网络异常，请稍后重试！"}`,
								duration: 1000
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			deleteRpt(report_id,index) {
				uni.showModal({ content: '确认删除吗？', success: (res) => { if (res.confirm) {
					// console.log(report_id);
					let token = uni.getStorageSync("token");
					let group_id = this.group_id;

					if (token) {
						uniCloud.callFunction({
							name: "ha_del_report",
							data: {
								token,
								group_id,
								report_id
							},
							success: ({result}) => {
								// console.log(result);

								if ( result.status === 0 ) {
									uni.showToast({
										title: `${result.msg || "删除成功！"}`,
										duration: 1000
									});
									// location.reload();
									this.myReportList.splice(index, 1);
								} else {
									uni.showModal({
										content: `${result.msg || "网络异常，请稍后重试！"}`,
										showCancel: false,
										complete: function () {
											uni.navigateTo({url: "/pages/user/user_login"});
										}
									});
								}
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '网络异常，请稍后重试！'
								});
							}
						});
					} else {
						uni.navigateTo({url: "/pages/user/user_login"});
					}
				}}});
			},
			removeGroup(group_id) {
				// console.log(group_id);

				uni.showModal({ content: '确认断开关联吗？', success: (res) => { if (res.confirm) {
					let token = uni.getStorageSync("token");

					if (token) {
						uniCloud.callFunction({
							name: "ha_update_group",
							data: {
								type: 0,
								token,
								group_id
							},
							success: ({result}) => {
								// console.log(result);

								if ( result.status === 0 ) {
									uni.showToast({
										title: `${result.msg || "断开关联成功！"}`,
										duration: 1000
									});
									location.reload();
								} else {
									uni.showToast({
										icon: 'none',
										title: `${result.msg || "网络异常，请稍后重试！"}`,
										duration: 1000
									});
								}
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '网络异常，请稍后重试！'
								});
							}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '出错了！'
						});
					}
				}}});
			}
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.text-area {
		text-align: center;
	}

</style>
